<!--
 * @Description: file content
-->
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column  label="产品名称" width="180" prop="title">
      </el-table-column>
      <el-table-column label="产品简述" prop="introduction">
      </el-table-column>
      <el-table-column label="产品详述" prop="detail">
      </el-table-column>
      <el-table-column label="产品图片">
        <template #default="scope">
          <div class="center" v-if="scope.row.productImg">
            <el-avatar :src="baseUrl + scope.row.productImg" :size="50" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除吗?"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogTableVisible" title="编辑产品信息">
      <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="产品名称" prop="title">
        <el-input v-model="ruleForm.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="产品简述" prop="introduction">
        <el-input v-model="ruleForm.introduction" :rows="2" type="textarea" />
      </el-form-item>
      <el-form-item label="产品详述" prop="detail">
        <el-input v-model="ruleForm.detail" :rows="2" type="textarea"> </el-input>
      </el-form-item>
      <el-form-item label="产品图片" prop="productImg">
        <Upload :avatar="ruleForm.productImg" @change="handleChange" />
      </el-form-item>
    </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogCancel">取消</el-button>
          <el-button type="primary" @click="dialogOk"> 修改 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref, reactive } from 'vue';
import { baseUrl,} from '@public/index';
import Upload from '@/components/upload/Upload.vue';
import uploadFun from '@/util/uploadFun';

const tableData = ref([]);
const dialogTableVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  title: '',
  introduction: '',
  productImg: '',
  detail: null,
  file: null // 上传的原生文件对象
});
const rules = reactive({
  title: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
  introduction: [{ required: true, message: '请输入产品简述', trigger: 'blur' }],
  detail: [{ required: true, message: '请输入产品详述', trigger: 'blur' }],
  productImg: [{ required: true, message: '请选择产品图片', trigger: 'change' }]
});
const getData = async () => {
  const res = await axios.get('/adminApi/product/list');
  if (res.code === 200) {
    tableData.value = res.data;
  }
};
const handleEdit = async (row) => {
  const res = await axios.get(`/adminApi/product/list/${row._id}`);
  dialogTableVisible.value = true;
  Object.assign(ruleForm, res.data[0]);
};
const handleDelete = async (index, row) => {
  axios.delete(`/adminApi/product/list/${row._id}`).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: res.msg,
        type: 'success',
      });
      getData();
    }
  });
};
const dialogCancel = () => {
  dialogTableVisible.value = false;
};
const handleChange = (file) => {
  ruleForm.productImg = URL.createObjectURL(file);
  ruleForm.file = file;
};
const dialogOk = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      uploadFun('/adminApi/product/list', ruleForm).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg);
          dialogTableVisible.value = false;
          getData();
        }
      });
    }
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  align-items: center;
}
</style>
